<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧食堂 UI 原型</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 15px;
      background-color: #f6f6f6;
      color: #333;
    }

    .header {
      text-align: center;
      padding: 15px 0;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header h1 {
      font-size: 1.5em;
      margin: 0;
      color: #ff2d55;
    }

    /* Red theme */
    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .card h2 {
      font-size: 1.1em;
      margin-top: 0;
      margin-bottom: 10px;
      border-left: 4px solid #ff2d55;
      padding-left: 8px;
    }

    .ai-feature {
      border: 1px dashed #ff2d55;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: #ffebee;
    }

    .ai-feature p {
      margin: 5px 0;
      font-size: 0.9em;
    }

    .ai-feature strong {
      color: #c4002b;
    }

    button {
      background-color: #ff2d55;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      width: 100%;
      margin-top: 10px;
    }

    button:hover {
      background-color: #c4002b;
    }

    .canteen-selector {
      display: flex;
      justify-content: space-around;
      margin-bottom: 15px;
      background-color: #fff;
      padding: 10px;
      border-radius: 8px;
    }

    .canteen-selector button {
      background-color: #eee;
      color: #555;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 0.9em;
      width: auto;
      margin: 0 5px;
    }

    .canteen-selector button.active {
      background-color: #ff2d55;
      color: white;
    }

    .dish-card {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
    }

    .dish-card:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .dish-card img {
      width: 80px;
      height: 60px;
      border-radius: 5px;
      margin-right: 15px;
      object-fit: cover;
    }

    .dish-card .info {
      flex-grow: 1;
    }

    .dish-card h3 {
      margin: 0 0 5px;
      font-size: 1em;
    }

    .dish-card p {
      margin: 2px 0;
      font-size: 0.85em;
      color: #777;
    }

    .dish-card .price {
      font-size: 1.1em;
      color: #ff2d55;
      font-weight: bold;
    }

    .crowd-status {
      font-size: 0.85em;
      padding: 3px 8px;
      border-radius: 10px;
      margin-left: 10px;
    }

    .crowd-low {
      background-color: #e6f7f2;
      color: #0d8c5a;
      border: 1px solid #b7ebde;
    }

    .crowd-medium {
      background-color: #fffbe6;
      color: #d48806;
      border: 1px solid #ffe58f;
    }

    .crowd-high {
      background-color: #fff1f0;
      color: #cf1322;
      border: 1px solid #ffccc7;
    }

    .nutrition-info ul {
      list-style: disc;
      padding-left: 20px;
      font-size: 0.9em;
      margin-top: 5px;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>智慧食堂</h1>
  </div>

  <div class="canteen-selector">
    <button class="active">一食堂</button>
    <button>二食堂</button>
    <button>三食堂</button>
    <button>清真食堂</button>
  </div>

  <div class="card">
    <h2>AI 拥挤度预测 (一食堂)</h2>
    <div class="ai-feature">
      <p><strong>当前状态:</strong></p>
      <p>一楼窗口: <span class="crowd-status crowd-medium">排队约5分钟</span></p>
      <p>二楼自选区: <span class="crowd-status crowd-low">排队较少</span></p>
      <p><strong>AI 预测 (12:30):</strong> <span class="crowd-status crowd-high">预计拥挤</span></p>
    </div>
    <button style="background-color: #f0f0f0; color: #555; margin-top: 5px;">刷新状态</button>
  </div>

  <div class="card">
    <h2>AI 个性化推荐 (午餐)</h2>
    <div class="ai-feature">
      <p><strong>推荐理由:</strong> 根据你的“低脂”、“偏爱辣味”偏好，为你推荐以下菜品：</p>
    </div>
    <div class="dish-card">
      <img src="dish1_placeholder.png" alt="菜品1">
      <div class="info">
        <h3>麻婆豆腐</h3>
        <p>一食堂一楼 | 川味窗口</p>
        <p>标签: 微辣, 素食</p>
      </div>
      <span class="price">￥ 6.0</span>
    </div>
    <div class="dish-card">
      <img src="dish2_placeholder.png" alt="菜品2">
      <div class="info">
        <h3>清蒸鲈鱼</h3>
        <p>一食堂二楼 | 特色蒸菜</p>
        <p>标签: 清淡, 低脂, 推荐</p>
      </div>
      <span class="price">￥ 15.0</span>
    </div>
    <button>查看更多推荐</button>
    <button style="background-color: #f0f0f0; color: #555; margin-top: 5px;">修改口味偏好</button>
  </div>

  <div class="card">
    <h2>AI 营养搭配分析</h2>
    <p>选择你今天想吃的，AI 分析营养是否均衡。</p>
    <!-- Placeholder for dish selection -->
    <div class="ai-feature">
      <p><strong>已选:</strong> 米饭, 麻婆豆腐, 红烧肉</p>
      <p><strong>AI 分析:</strong></p>
      <ul class="nutrition-info">
        <li>蛋白质: 充足</li>
        <li>脂肪: 偏高 <span style="color: #ff4d4f">(建议将红烧肉换成蔬菜)</span></li>
        <li>碳水化合物: 合适</li>
        <li>维生素: 建议增加蔬菜摄入</li>
      </ul>
    </div>
    <button>智能换餐</button>
  </div>

  <!-- <div class="card">
        <h2>AI 智能预定</h2>
        <p>提前预定，到店即取，无需排队。</p>
        <button>立即预定</button>
    </div> -->

</body>

</html>